<!--
 * @Description: 
 * @Date: 2023-04-01 10:29:42
 * @LastEditors: czp
 * @LastEditTime: 2023-05-09 11:09:15
-->
<template>
	<!-- 登录对话框 -->
	<Teleport to="#dialog">
		<el-dialog class="login-dialog" v-model="showDialog" width="21%" :show-close="true">
			<el-tabs class="login-box" v-model="signInFrom.way" stretch>
				<el-tab-pane v-for="item in ESignIn" :key="item" :label="$t(`signIn.${item}`)" :name="item">
					<!-- 微信登录 -->
					<div v-if="signInFrom.way == 'wx'" class="wx-box box">
						<!-- <Qrcode code="132456" />
							<span>使用微信扫一扫登录</span> 
							<span>“云上荆竹”</span> -->
						<ElButton type="success">
							<template #icon>
								<IFaWechat />
							</template>
							{{ $t("signIn.wechat-sign-in") }}
						</ElButton>
					</div>
				</el-tab-pane>
			</el-tabs>
			<!-- 手机号 邮箱登录 -->
			<div class="login-box">
				<el-form v-if="signInFrom.way != 'wx'" ref="signInFormRef" :model="signInFrom" :rules="rules" status-icon class="tel-box box">
					<el-form-item v-if="signInFrom.way == 'tel'" prop="target">
						<el-input v-model="signInFrom.target" :placeholder="$t('signIn.tel-hint')">
							<template #prepend>
								<IFaUser />
							</template>
						</el-input>
					</el-form-item>

					<el-form-item v-if="signInFrom.way == 'email'" prop="target">
						<el-input v-model="signInFrom.target" :placeholder="$t('signIn.email-hint')">
							<template #prepend>
								<IFaEnvelope />
							</template>
						</el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input v-model="signInFrom.password" type="password" :placeholder="$t('signIn.password-hint')">
							<template #prepend>
								<IFaLock />
							</template>
						</el-input>
					</el-form-item>

					<el-form-item>
						<ElButton @click="validateForm" class="sub-btn" type="primary" :size="'large'">{{ $t("signIn.sign-in") }}</ElButton>
						<div class="register-box">
							<ElButton @click="emits('clickSignUpNow')" type="primary" link>{{ $t("signIn.register") }}</ElButton>
							<ElButton @click="emits('clickResetPsdNow')" link>{{ $t("signIn.forgot-password") }}</ElButton>
						</div>
					</el-form-item>

					<el-form-item prop="isAgree">
						<el-checkbox class="agreement" v-model="signInFrom.isAgree" size="large">
							<div>
								{{ $t("signIn.agree") }} <span class="title"> {{ $t("signIn.agreement") }}</span> {{ $t("signIn.and") }} <span class="title">{{ $t("signIn.policy") }}</span>
							</div>
						</el-checkbox>
					</el-form-item>
				</el-form>
			</div>
		</el-dialog>
	</Teleport>
</template>
<script setup lang="ts">
import { TFormItemRules } from "@/components/interface";
import { ESignIn } from "@/enums/appEnum";
import { USER_PATH } from "@/enums/routerEnum";
import { useVR } from "@/hook/useVR";
import { userSignIn } from "@/service/modules/user";
import { useBaseStore } from "@/store/base";
import { useUserStore } from "@/store/user";
import { FormInstance } from "element-plus";
import { useI18n } from "vue-i18n";

export interface ISignInForm {
	way?: "wx" | "tel" | "email"; //登录类型
	target: string; //电话号码
	password: string; //密码
	isAgree: boolean; // 是否同意隐私政策
}
//获取i18n ComposerTranslation
const i18n = useI18n();
const { pageJump } = useVR();
const { setToken } = useBaseStore();
// 点击立即注册事件
const emits = defineEmits<{ (e: "clickSignUpNow"): void; (e: "clickResetPsdNow"): void }>();

// 显示对话框
const showDialog = ref(false);
// 打开对话框
const open = () => (showDialog.value = true);
// 关闭对话框
const close = () => (showDialog.value = false);
// 登录表单
const signInFrom = ref<ISignInForm>({
	way: "wx",
	target: "",
	password: "",
	isAgree: false
});
// 表单ref对象
const signInFormRef = ref<FormInstance>();

//表单项规则
const rules = reactive<TFormItemRules<ISignInForm>>({
	target: [{ required: true, message: signInFrom.value.way == "tel" ? i18n.t("signIn.tel-hint") : i18n.t("signIn.email-hint") }],
	password: [{ required: true, message: i18n.t("signIn.password-hint") }],
	isAgree: [{ required: true, validator: (_, value) => value === true, message: i18n.t("signIn.agreement-hint") }]
});

const { actionGetUserInfo } = useUserStore();

/**
 * 登录
 */
const signIn = async () => {
	const { message, data } = await userSignIn(signInFrom.value);
	ElNotification({ type: "success", message, duration: 1500 });
	close();
	setToken(data.token);
	await actionGetUserInfo();
	pageJump(USER_PATH);
};

/**
 *验证表单
 */
const validateForm = async () => {
	await signInFormRef.value.validate((valid, fields) => {
		if (valid) {
			signIn();
		} else {
			console.log("error submit!", fields);
		}
	});
};

onUpdated(() => {
	ElMessage.success({ message: "", duration: 1 });
});

defineExpose({ open, close });
</script>
<style lang="scss" scoped>
.login-box {
	--el-color-primary: #c39f63;
	--el-color-basic-black: #333333;
	--el-color-info: #c39f63;
	--el-color-primary-dark-2: #ecc47e;
	--el-color-primary-light-3: #ecc47e;
	.box {
		min-height: 300px;
		padding: 32px 20px;
	}
	.wx-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: var(--el-color-basic-black);
	}
	.tel-box {
		color: var(--el-color-primary);
	}
	.el-form-item {
		margin-bottom: 2rem;
	}
	.sub-btn {
		width: 100%;
		margin-top: 20px;
	}
	.register-box {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-top: 20px;
	}
	.agreement {
		--el-checkbox-checked-text-color: #606266;

		white-space: normal;
		.title {
			color: var(--el-color-primary);
		}
	}
}
</style>
